<template lang="">
    <div class="Top">
        <div class="top">
            <el-radio-group v-model="labelPosition" size="small">
                <el-radio-button label="left">左对齐</el-radio-button>
                <el-radio-button label="right">右对齐</el-radio-button>
                <el-radio-button label="top">顶部对齐</el-radio-button>
            </el-radio-group>
            <div style="margin: 20px;"></div>
            <el-form :rules="rules" :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
                <el-form-item label="高管编号" prop="id">
                    <el-input v-model="formLabelAlign.id"></el-input>
                </el-form-item>
                <el-form-item label="高管名称" prop="name">
                    <el-input v-model="formLabelAlign.name"></el-input>
                </el-form-item>
                <el-form-item label="出生日期" prop="birth">
                    <el-input v-model="formLabelAlign.birth"></el-input>
                </el-form-item>
                <el-form-item label="职务" prop="job">
                    <el-input v-model="formLabelAlign.job"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-input v-model="formLabelAlign.sex"></el-input>
                </el-form-item>
                <el-form-item label="学历" prop="education">
                    <el-input v-model="formLabelAlign.education"></el-input>
                </el-form-item>
                <el-button type="primary" @click="submitForm()">修改</el-button>
                <el-button type="primary" @click="up">返回</el-button>
            </el-form>
        </div>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                //表单的定位
                labelPosition: 'right',
                //储存获取数据的
                formLabelAlign: {
                    id: '',
                    name: '',
                    birth: '',
                    job: '',
                    sex: '',
                    education: ''
                },
                //输入框校验规则
                rules: {
                    id: [
                        { required: true, message: '请输入ID', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],

                    job: [
                        { required: true, message: '请选择职务', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别', trigger: 'blur' }
                    ],
                    birth: [
                        { required: true, message: '请选择日期', trigger: 'blur' }
                    ],

                    education: [
                        { required: true, message: '请选择学历', trigger: 'blur' }
                    ],
                }
            }
        },
        mounted() {
            //在页面加载完成后执行
            this.getInformation()
        },
        methods: {
            //返回上一层
            up() {
                this.$router.push({ path: '/workes', query: { enterpriseId: this.$route.query.enterpriseId } })
            },
            //提交表单
            submitForm() {
                console.log(this.formLabelAlign.birth)
            },
            //将传过来的数据进行接收
            getInformation() {
                this.formLabelAlign.id = this.$route.query.id
                this.formLabelAlign.name = this.$route.query.name
                this.formLabelAlign.birth = this.$route.query.birth
                this.formLabelAlign.job = this.$route.query.job
                this.formLabelAlign.sex = this.$route.query.sex
                this.formLabelAlign.education = this.$route.query.education

            },
        },
    }
</script>
<style lang="css">
    .Top {
        margin: auto;
    }

    .top {
        margin: auto;
        height: 800px;
        width: 500px
    }
</style>